<template>
  <svg class="icon" aria-hidden="true" v-bind="$attrs">
    <use :xlink:href="href" :color="color" :class="$attrs.class"></use>
  </svg>
</template>

<script setup>
import { computed } from 'vue';
const { use, size } = defineProps({
  size: {
    type: String,
    default: "2em",
  },
  color: {
    type: String,
    default: '#959595',
  },
  use: {
    type: String,
    required: true,
  }
})

const href = computed(() => {
  return "#icon-" + use
})

defineOptions({
  inheritAttrs: false,
})

</script>

<style scoped lang="scss">
.icon {
  width: v-bind(size);
  height: v-bind(size);
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  transform: all 1s;

}

.is-select {
  color: $sidebar-is-select;
}

.no-select {
  color: $sidebar-no-select;

}
</style>